import React, { Component, createContext } from 'react'

//通过createContext创建上下文

let {
  Provider, //提供值
  Consumer //获取值
} = createContext()

class Demo extends Component {
  render() {
    return (
      <div>
        ------
        <h3>Demo 组件</h3>
        <DemoChild></DemoChild>
        ------
      </div>
    )
  }
}

class DemoChild extends Component {
  render() {
    return (
      <Consumer>
        {
          ({msg, handleClick})=>{
            return (
              <div>
                ------
                <h3>DemoChild 组件:{msg}</h3>
                <button
                onClick={()=>{handleClick('🐂')}}>
                  变牛
                </button><br />
                ------
              </div>
            )
          }
        }
      </Consumer>
    )
  }
}

export default class App extends Component {
  state = {
    msg: '🐖'
  }

  handleClick = (params) => {
    this.setState({
      msg: params
    })
  }

  render() {
    return (
      <div>
        <Provider
        value={
          {
            msg: this.state.msg,
            handleClick: this.handleClick
          }
        }>
          <Demo />
        </Provider>
      </div>
    )
  }
}
